<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>OOPS - Documentation</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link href="css/styles.css" rel="stylesheet">
	</head>
	<body>
<div class="wrapper">
    <div class="box">
        <div class="row">
          
            <!-- sidebar -->
            <div class="column col-sm-3" id="sidebar">
                <a class="logo" href="#">OOPS Documentation</a>
                <ul class="nav">
                    <li class="page-scroll">
                      <a href="#anchor1">Informations</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor2">How to install on your server</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor3">FLAT</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor4">Image</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor5">Slideshow</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor6">YouTube / Add your video</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor7">Mozaïc animation</a>
                    </li>
                    <li class="page-scroll">
                      <a href="#anchor8">Bubble animation</a>
                    </li>     
                    <br/><hr><br/>
                    <li>
                      <a href="http://sass-lang.com/" target="_blank">SASS Doc</a>
                    </li>
                    <li>
                      <a href="http://getbootstrap.com/" target="_blank">Bootstrap Doc</a>
                    </li>
                    <li>
                      <a href="http://bourbon.io/" target="_blank">Bourbon Doc</a>
                    </li>
                </ul>
                
            </div>
            <!-- /sidebar -->
          
            <!-- main -->
            <div class="column col-sm-9" id="main">
                <div class="padding">
                    <div class="full col-sm-9">
                      
                        <!-- content -->
                        
                        <div class="col-sm-12" id="anchor1">   
                          <div class="page-header text-muted">
                          Informations
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <h3>Thank you for having chosen OOPS!</h3>
                            <p>1 week of hard work has been necessary to build this template for having a perfect layout on every screen, an advanced design and the last trends coupled with an accurate coding.<br>
                            I would be very grateful if you could rate my item at <a href="http://themeforest.net/downloads" target="_blank">this link</a> with 5 stars and leave your feedback, this is very important for me, Thanks! :-)</p>
                            <p>If you have any questions, feel free to email me via my user page with the contact form <a href="http://themeforest.net/user/Madeon08" target="_blank">Here</a><br/>
                            I try to answer as soon as possible, 7/7 and almost 24/24!<br/>
                            Time in my country :
                            <span><strong>
                              <span id="tzTimeSpan_ee55fafbed5cd52"></span>
                            </strong></span><br/>
                            During your customization, I advise you to be connected to Internet for the correct running of jQuery<br/>
                            <strong>All the lines of style written in this document are the lines of the CSS files. The line numbers for the SASS users are almost the same, thanks for your comprehension.</strong></p>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor2">   
                          <div class="page-header text-muted">
                          Installation on your server via FTP
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <p>How To Install OOPS Via FTP :<br>
                                Step 1 - <strong>Log into your hosting space via an FTP software</strong> (Filezilla for example).<br>

                                Step 2 - <strong>Unzip your Download Pack file</strong> and use the extracted OOPS theme folder.<br>

                                Step 3 - <strong>Upload the HTML file corresponding to the variant of your choice</strong> along with all directories (css,js,img) in the structure that they appear in your download package. Then, the HTML file should reside in the root directory, and all other files should reside inside their associated folder.</p>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor3">   
                          <div class="page-header text-muted">
                          FLAT - Color and animation
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <p><strong>How to change the background color?</strong><br>
                              Open your style.css file, around the line 105, you will find this :</p>
                            <pre style="background:#002240;color:#fff"><span style="color:#9effff">body</span><span style="color:#5fe461"><span style="color:#e1efff">.</span>flat</span> <span style="color:#e1efff">{</span>
  <span style="color:#9df39f">background</span><span style="color:#e1efff">:</span> <span style="color:#edf080"><span style="color:#e1efff">#</span>8471d7</span><span style="color:#e1efff">;</span>
}
</pre>
                            <p><strong>How to edit the background animation?</strong><br>
                              This is an awesome lightweight JavaScript library for creating particles. Full documentation can be found here : <a href="https://github.com/VincentGarreau/particles.js/" target="_blank">here</a><br>
                              All settings are in the particles.js file. You can change colors, sizes, forms and so on... from the line 1543.</p>

                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor4">   
                          <div class="page-header text-muted">
                          Image
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <p><strong>How to change the background picture?</strong><br>
                              Open your style.css file, around the line 560, you will find this :</p>

                              <pre style="background:#002240;color:#fff">.<span style="color:#ccc">image</span> {
  <span style="color:#ccc">background</span><span style="color:#ff9d00">:</span> url(<span style="color:#3ad900">"</span>../img/image.jpg<span style="color:#3ad900">"</span>) <span style="color:#ccc">center</span>;
  <span style="color:#ff9d00">...</span>
}
</pre>

<p>So, you can change the path or replace the placeholder image.jpg already available in the img folder.</p>

<p>Ken Burns (zoom - unzoom) effect is created by a simple CSS keyframe on line 580.</p>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor5">   
                          <div class="page-header text-muted">
                          VEGAS SLIDESHOW - SET UP
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <p>VEGAS is a jQuery plugin which adds beautiful animated background slideshows to your page body or any of its elements. It works on IE9+, Safari, Firefox and Chrome.<br>
                            Check the awesome official documentation of this plugin <a href="http://vegas.jaysalvat.com/documentation/settings/" target="_blank">here</a> for all the settings available.<br>
                            <strong>Specific slide options and settings are in the file js/vegas.js, see the code below.</strong></p>
                            <pre style="background:#042029;color:#839496">$(<span style="color:#269186"><span style="color:#c60000">"</span>body<span style="color:#c60000">"</span></span>)<span style="color:#859900">.</span>vegas({
    slides<span style="color:#859900">:</span> [
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-1.jpg<span style="color:#c60000">"</span></span> },
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-2.jpg<span style="color:#c60000">"</span></span> },
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-3.jpg<span style="color:#c60000">"</span></span> }
    ],

    <span style="color:#586e75">// Delay beetween slides in milliseconds.</span>
    delay<span style="color:#859900">:</span> <span style="color:#d33682">5000</span>,

    <span style="color:#586e75">// Chose your transition effect (See the documentation provided in your download pack)</span>
    transition<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">'</span>fade<span style="color:#c60000">'</span></span>

});
</pre>

<p>So, you can change the paths or replace the placeholders home-slide-N.jpg already available in the img folder.</p>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor6">   
                          <div class="page-header text-muted">
                          YouTube, add your video
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">

                              <p>This is a jQuery component that let you play a Youtube® movie as background of your HTML page.<br>
                                Add easily your video with just your link in the HTML code, see the code below.<br>
                                For more options, please visit <a href="https://github.com/pupunzi/jquery.mb.YTPlayer/wiki" target="_blank">this page</a>.</p>
                              <pre style="background:#042029;color:#839496"><span style="color:#859900">&lt;</span>a id<span style="color:#859900">=</span><span style="color:#269186"><span style="color:#c60000">"</span>bgndVideo<span style="color:#c60000">"</span></span> class<span style="color:#859900">=</span><span style="color:#269186"><span style="color:#c60000">"</span>player<span style="color:#c60000">"</span></span> data<span style="color:#859900">-</span>property<span style="color:#859900">=</span><span style="color:#269186"><span style="color:#c60000">"</span>{videoURL:'http://youtu.be/RdGVz104b3E',containment:'body',autoPlay:true, mute:false, startAt:0, stopAt:0, opacity:1}<span style="color:#c60000">"</span></span><span style="color:#859900">></span><span style="color:#859900">&lt;</span><span style="color:#859900">/</span>a<span style="color:#859900">></span>
</pre>

                              <br><hr><br>

                              <p>The player doesn’t work as background for mobile devices due to the restriction policy adopted by all on managing multimedia files via javascript.<br>
To solve this, instead of to have only the color of your body, I added a fullscreen slideshow with the pictures of your choice.<br>
<strong>Set up this one at the very bottom of your HTML, see the code below.</strong></p>
                              <pre style="background:#042029;color:#839496">$(<span style="color:#269186"><span style="color:#c60000">"</span>body<span style="color:#c60000">"</span></span>)<span style="color:#859900">.</span>vegas({
    slides<span style="color:#859900">:</span> [
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-1.jpg<span style="color:#c60000">"</span></span> },
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-2.jpg<span style="color:#c60000">"</span></span> },
        { src<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">"</span>img/home-slide-3.jpg<span style="color:#c60000">"</span></span> }
    ],

    <span style="color:#586e75">// Delay beetween slides in milliseconds.</span>
    delay<span style="color:#859900">:</span> <span style="color:#d33682">5000</span>,

    <span style="color:#586e75">// Chose your transition effect (See the documentation provided in your download pack)</span>
    transition<span style="color:#859900">:</span> <span style="color:#269186"><span style="color:#c60000">'</span>fade<span style="color:#c60000">'</span></span>

});
</pre>

                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor7">   
                          <div class="page-header text-muted">
                          Mozaïc Animation
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-10">
                            <p>With this awesome plugin, your page will be very attractive.<br>You can edit the colors and the shape of the squares in the back.<br>
                            <strong>Specific color options and settings are in the file js/mozaic.js, see the code below.</strong></p>
                            <p>Dots colors</p>
                            <pre style="background:#0c1021;color:#f8f8f8">colors: [ <span style="color:#61ce3c">'rgba(49,56,141,alp)'</span>, <span style="color:#61ce3c">'rgba(254,8,97,alp)'</span>, <span style="color:#61ce3c">'rgba(253,255,86,alp)'</span> ]
</pre>
                            <p>Stroke color</p>
                            <pre style="background:#0c1021;color:#f8f8f8">strokeColor: <span style="color:#61ce3c">'rgb(43,45,53)'</span>
</pre>
                            <p>Background color</p>
                            <pre style="background:#0c1021;color:#f8f8f8">ctx.fillStyle <span style="color:#fbde2d">=</span> <span style="color:#61ce3c">'rgba(32,35,45,alp)'</span>
</pre>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="anchor8">   
                          <div class="page-header text-muted">
                          Bubble Animation
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-10">
                            <p>Stunning bubble animation with different colors.<br>
                            <strong>Specific color options and settings are in the file js/bubble.js, see the code below.</strong></p>
                            <p>Back bubbles line 27</p>
                            <pre style="background:#042029;color:#839496">this.aBgBubbles.push(new Bubble(<span style="color:#FFD700"><span style="color:#FFD700">'</span>rgba(49,56,141,0.5)<span style="color:#FFD700">'</span></span>, 3.5)); <span style="color:#586e75">// Color for the bubbles in the back</span>
</pre>
                            <p>Front bubbles line 86</p>
                            <pre style="background:#042029;color:#839496">var _c = arguments.length <= 0 || arguments[0] === undefined ?  <span style="color:#FFD700"><span style="color:#FFD700">'</span>rgba(254,8,97,0.8)<span style="color:#FFD700">'</span></span> : arguments[0]; <span style="color:#586e75">// Color for the bubbles on the front</span>
</pre>
                            <p>Background picture is set in style.css line 1680</p>
                            <pre style="background:#002240;color:#fff"><span style="color:#9effff">body</span><span style="color:#5fe461"><span style="color:#e1efff">.</span>bubble</span> <span style="color:#e1efff">{</span>
  <span style="color:#9df39f">background</span><span style="color:#e1efff">:</span> <span style="color:#ffb054">url</span><span style="color:#e1efff">(</span><span style="color:#3ad900">"</span>../img/background-bubble.jpg<span style="color:#3ad900">"</span><span style="color:#e1efff">)</span> <span style="color:#f6f080">center</span><span style="color:#e1efff">;</span>
  <span style="color:#9df39f">background</span>-<span style="color:#9df39f">size</span><span style="color:#e1efff">:</span> cover<span style="color:#e1efff">;</span>
}
</pre>
                          </div>
                        </div>

                        <!-- /////////////////////////////////////// -->
                        <!-- /////////////////////////////////////// -->

                        <div class="col-sm-12" id="extra">   
                          <div class="page-header text-muted">
                          Extra
                          </div> 
                        </div>

                        <div class="row">    
                          <div class="col-sm-12">
                            <h3>Documentation</h3>
                            <p>Just below the nav on your left, you will find 4 useful links to learn or improve your knowledges in SASS, Bootstrap & Bourbon</p>
                            </h4>
                          </div>
                        </div>

                      <br/><br/>
                        
                      
                    </div><!-- /col-9 -->
                </div><!-- /padding -->
            </div>
            <!-- /main -->
          
        </div>
    </div>
</div>
	<!-- script references -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <script type="text/javascript" src="http://24timezones.com/js/en/time_24_1_1.js"></script>
    <script src="http://24timezones.com/timescript/gettime.js.php?city=195&hourtype=24&showdate=1&showseconds=1&id=1959982&elem=ee55fafbed5cd52" language="javascript"></script>

    <script src="js/jquery.smoothscroll.min.js"></script>

    <script>
    $(function() {
      $('html').smoothScroll(500);
    });
    </script>
	</body>
</html>